<!--  -->
<template>
  <div class="blank-list-wrap list-colum-width">
    <div
      class="blank-item list-colum-width"
      :class="{
        study__learning: +item.now === 1,
        study__no: +item.num === 0,
      }"
      @click="itemClickHandle(item)"
      v-for="item in renderData"
      :key="item.id"
    >
      <div class="blank-study-times">
        <img
          v-if="+item.num === 1"
          src="~assets/reverse/blank-num1.png"
          alt=""
        />
        <img
          v-if="+item.num === 2"
          src="~assets/reverse/blank-num2.png"
          alt=""
        />
        <img
          v-if="+item.num === 3"
          src="~assets/reverse/blank-num3.png"
          alt=""
        />
        <img
          v-if="+item.num === 4"
          src="~assets/reverse/blank-num4.png"
          alt=""
        />
        <img
          v-if="+item.num >= 5"
          src="~assets/reverse/blank-num5.png"
          alt=""
        />
      </div>
      <div class="blank-content">
        <p class="main-grammar">
          <span>{{ item.title }}</span>
        </p>
      </div>
    </div>
    <div class="list-colum-width"></div>
    <div class="list-colum-width"></div>
  </div>
</template>

<script>
export default {
  name: "proofreadList",
  components: {},
  data() {
    return {};
  },
  props: {
    renderData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {},
  watch: {},
  methods: {
    itemClickHandle(item) {
      this.$router.push({
        path: "/reverse/grammar-mistaketest",
        query: {
          id: item.id,
          type: "1",
          title: item.title,
          num: item.num,
        },
      });
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
@import "@/style/var.less";

.blank-list-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;

  .blank-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    padding: 30px 10px 30px 30px;
    background-color: #fff;
    border-radius: 10px;
    text-align: left;
    margin-bottom: 20px;
    transition: box-shadow 0.3s;
    &:hover {
      box-shadow: 0px 0px 10px rgba(39, 191, 163, 0.5);
    }
    &.study__learning {
      border: 1px solid #27bfa3;
    }
    &.study__no {
      .main-grammar {
        color: #adadad;
      }
    }
    // height: 200px;
    .main-grammar {
      font-size: 24px;
      &.grammar-hidden {
        visibility: hidden;
      }
      .no-rem-fontsize(24px);
    }

    .blank-study-times {
      position: absolute;
      right: -36px;
      bottom: -45px;
      width: 140px;
      img {
        width: 100%;
      }
    }
  }
  .study-num__1,
  .study-num__2,
  .study-num__3,
  .study-num__4,
  .study-num__5 {
    background-image: url("~assets/reverse/blank-num1.png");
    background-size: 140px;
    background-position: 100% 0;
    background-repeat: no-repeat;
  }
  @media screen and (max-width: 1200px) {
    .blank-item {
      margin-right: 0 !important;
    }
  }
}
</style>
